.liner-box {
    display: none;
}
.hr{
    border:none;
    background-color: #fff;
    width: 2px;
    height: 8px;
    float: right;
    margin: 0 2px;
    animation: liner 0.2s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.hr1{
    animation-delay: -2s;
}
.hr2{
    animation-delay: -1.9s;
}
.hr3{
    animation-delay: -1.8s;
}
.hr4{
    animation-delay: -1.7s;
}
.hr5{
    animation-delay: -1.6s;
}
.hr6{
    animation-delay: -1.5s;
}
.hr7{
    animation-delay: -1.4s;
}
.hr8{
    animation-delay: -1.3s;
}
.hr9{
    animation-delay: -1.2s;
}
.hr10{
    animation-delay: -1.1s;
}
@keyframes liner {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(6);
    }
}